<template>
  <view
    v-if="show"
    class="fu-tag"
    :class="[
      `fu-tag--${type}`,
      `fu-tag--${size}`,
      {
        'fu-tag--plain': plain,
        'fu-tag--round': round,
        'fu-tag--mark': mark,
        'fu-tag--closeable': closeable
      }
    ]"
    :style="[
      {
        backgroundColor: plain ? '' : color,
        color: plain ? color : '',
        borderColor: color
      }
    ]"
    @click="onClick"
  >
    <!-- 左侧图标 -->
    <text 
      v-if="icon"
      class="fu-tag__icon fu-icon"
      :class="[`icon-${icon}`]"
    ></text>
    
    <!-- 内容 -->
    <slot></slot>
    
    <!-- 关闭按钮 -->
    <text
      v-if="closeable"
      class="fu-tag__close fu-icon icon-close"
      @click.stop="onClose"
    ></text>
  </view>
</template>

<script>
/**
 * fu-tag 标签组件
 * @description 用于标记和选择
 * @property {String} type - 类型，可选值：primary/success/warning/danger/info
 * @property {String} size - 尺寸，可选值：small/medium/large
 * @property {Boolean} plain - 是否为空心样式
 * @property {Boolean} round - 是否为圆角样式
 * @property {Boolean} mark - 是否为标记样式
 * @property {Boolean} closeable - 是否可关闭
 * @property {String} color - 自定义颜色
 * @property {String} icon - 图标名称
 * @event {Function} click - 点击标签时触发
 * @event {Function} close - 关闭标签时触发
 */
export default {
  name: 'fu-tag',
  props: {
    type: {
      type: String,
      default: 'primary',
      validator: value => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
    },
    size: {
      type: String,
      default: 'medium',
      validator: value => ['small', 'medium', 'large'].includes(value)
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    mark: {
      type: Boolean,
      default: false
    },
    closeable: {
      type: Boolean,
      default: false
    },
    color: String,
    icon: String
  },
  data() {
    return {
      show: true
    }
  },
  methods: {
    onClick(event) {
      this.$emit('click', event)
    },
    onClose(event) {
      this.show = false
      this.$emit('close', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 16rpx;
  color: #fff;
  font-size: var(--fu-font-size-sm);
  line-height: 1;
  border: 2rpx solid transparent;
  border-radius: var(--fu-radius-base);
  box-sizing: border-box;
  
  &__icon {
    margin-right: 4rpx;
    font-size: inherit;
  }
  
  &__close {
    margin-left: 4rpx;
    font-size: inherit;
    cursor: pointer;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  // 尺寸
  &--small {
    height: 40rpx;
    padding: 0 12rpx;
    font-size: var(--fu-font-size-xs);
  }
  
  &--medium {
    height: 48rpx;
    padding: 0 16rpx;
    font-size: var(--fu-font-size-sm);
  }
  
  &--large {
    height: 56rpx;
    padding: 0 20rpx;
    font-size: var(--fu-font-size-base);
  }
  
  // 圆角
  &--round {
    border-radius: var(--fu-radius-max);
  }
  
  // 标记样式
  &--mark {
    border-radius: 0 var(--fu-radius-max) var(--fu-radius-max) 0;
  }
  
  // 空心样式
  &--plain {
    background-color: transparent !important;
    
    &.fu-tag--primary {
      color: var(--fu-primary-color);
      border-color: var(--fu-primary-color);
    }
    
    &.fu-tag--success {
      color: var(--fu-success-color);
      border-color: var(--fu-success-color);
    }
    
    &.fu-tag--warning {
      color: var(--fu-warning-color);
      border-color: var(--fu-warning-color);
    }
    
    &.fu-tag--danger {
      color: var(--fu-danger-color);
      border-color: var(--fu-danger-color);
    }
    
    &.fu-tag--info {
      color: var(--fu-info-color);
      border-color: var(--fu-info-color);
    }
  }
  
  // 主题色
  &--primary {
    background-color: var(--fu-primary-color);
    border-color: var(--fu-primary-color);
  }
  
  &--success {
    background-color: var(--fu-success-color);
    border-color: var(--fu-success-color);
  }
  
  &--warning {
    background-color: var(--fu-warning-color);
    border-color: var(--fu-warning-color);
  }
  
  &--danger {
    background-color: var(--fu-danger-color);
    border-color: var(--fu-danger-color);
  }
  
  &--info {
    background-color: var(--fu-info-color);
    border-color: var(--fu-info-color);
  }
}
</style> 